<template>
	<view class="content">
		<!-- #ifdef MP-WEIXIN -->
		<view :style="{ height: statusHeight + 'px' }"></view>
		<view :style="{ height: intervalHeight + 'px' }"></view>
		<view :style="{ height: capsuleHeight + 'px' }" style="display: flex; align-items: center">
			<view class="close">
				<up-icon name="close" color="#fff" size="24" @click="back"></up-icon>
			</view>
		</view>
		<!-- #endif -->
		<view class="avatar">
			<image src="/static/logo.png" mode="" style="width: 144rpx;height: 144rpx;"></image>
			<view class="p">先贤祠墓纪念堂</view>
		</view>
		<view class="form">
			<view class="xieyi">
				<!-- <view class="tips">请阅读并同意协议</view> -->
				<view>
					<image src="http://112.124.50.179:8888/imgs/login/check.png" mode="" v-if="flag"
						@click="flag=!flag"></image>
					<image src="http://112.124.50.179:8888/imgs/login/not_check.png" mode="" v-else @click="flag=!flag">
					</image>
					已阅读并同意<text>《用户服务协议》</text>和<text>《隐私权政策》</text>
				</view>
			</view>
			<view class="btn">
				<up-button :disabled="!isDisabled" color="rgba(243, 224, 187, 1)" shape="circle" @click="wxLogin">
					<text>通过微信登录</text>
				</up-button>
			</view>
		</view>
		<view class="other">
			<view class="othen_login">
				<view class="line"></view> <text>其他方式登录</text>
				<view class="line"></view>
			</view>
			<view class="type">
				<view @click="goUrl('/pages/login/login_phone')">
					<image src='http://112.124.50.179:8888/imgs/login/p.png' mode=""></image>
					<text>手机号登录</text>
				</view>
				<view @click="goUrl('/pages/login/login')">
					<image src='http://112.124.50.179:8888/imgs/login/m.png' mode=""></image>
					<text>密码登录</text>
				</view>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from "vue"
	// #ifdef MP-WEIXIN
	let value = wx.getMenuButtonBoundingClientRect();
	let statusHeight = uni.getSystemInfoSync().safeAreaInsets.top;
	let intervalHeight = value.bottom - statusHeight - value.height;
	let capsuleHeight = value.height;
	// #endif
	const statusBarHeight = getApp().globalData.statusBarHeight;
	let flag = ref(false)
	const isDisabled = computed(() => {
		if (flag.value) {
			return true
		} else {
			return false
		}
	})
	/**
	 * 校验数据
	 */
	const validateData = () => {
		if (!flag.value) {
			uni.showToast({
				title: '请勾选用户协议！',
				icon: 'none',
				duration: 2000
			})
			return false
		}
		return true
	}

	/**
	 * 通过微信登录
	 */
	const wxLogin = () => {
		if (!validateData()) {
			return
		}

		// 微信登录
		uni.login({
			"provider": "weixin",
			"onlyAuthorize": true, // 微信登录仅请求授权认证
			success: function(event) {
				const {
					code
				} = event
				uni.showToast({
					title: code
				})
				// let rst = await loginApi({
				// 	loginType:1, //1:微信登录，2:账号密码登录，3:手机号登录
				// })
				// if (rst.data.code == 0) {
				// 	let token = rst.data.data.token
				// 	uni.setStorageSync('ACCESS_TOKEN', token);
				// 	uni.showToast({
				// 		title: '注册成功',
				// 		icon: 'success',
				// 		duration: 1000,
				// 	});
				// 	uni.reLaunch({
				// 		url: '/pages/login/editInfo'
				// 	})
				// } else {
				// 	uni.showToast({
				// 		title: rst.data.msg,
				// 		icon: 'success',
				// 		duration: 1000,
				// 	});
				// }
			},
			fail: function(err) {
				// 登录授权失败
				// err.code是错误码
			}
		})

	}

	const back = (() => {
		uni.navigateBack({
			delta: 1
		})
	})

	const goUrl = ((url) => {
		uni.navigateTo({
			url: url
		})
	})
</script>

<style lang="less">
	page {
		background: url('http://112.124.50.179:8888/imgs/login/bg.png') no-repeat;
		background-size: cover;
		background-position: 100%;
	}



	.content {
		.close {
			padding: 44rpx 0;
		}

		.avatar {
			display: flex;
			align-items: center;
			color: #fff;
			flex-direction: column;
			font-size: 40rpx;
			padding-top: 64rpx;

			.p {
				padding-top: 40rpx;
				font-weight: bold;
			}
		}

		.form {
			padding: 120rpx 48rpx 0 48rpx;

			.xieyi {
				position: relative;

				view {
					display: flex;
					align-items: center;

					image {
						position: relative;
						top: 1px;
						width: 40rpx;
						height: 40rpx;
					}
				}

				.check {
					padding-right: 8rpx;
				}

				padding: 106rpx 0 40rpx 0;
				color: #999999;
				font-size: 24rpx;

				text {
					color: #fff;
				}
			}

			.tips {
				width: 224rpx;
				height: 56rpx;
				background-color: #2C2F2F;
				border-radius: 10rpx;
				position: absolute;
				top: 28rpx;
				color: #C5C5C5;
				font-size: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.tips::before {
				content: '';
				width: 0;
				height: 0;
				border: 12rpx solid;
				position: absolute;
				bottom: -20rpx;
				left: 2rpx;
				border-color: #2C2F2F transparent transparent;
			}


			.not_register {
				padding-top: 16rpx;
				color: #999999;
				font-size: 24rpx;
			}

			.btn {

				text {
					color: black;
					font-size: 36rpx;
					font-weight: Medium;
					font-family: PingFang SC-Medium;
				}
			}

			.register {
				padding-top: 32rpx;
				display: flex;
				justify-content: space-between;
				font-size: 28rpx;

				text:nth-child(1) {
					color: #5BD465;
				}

				text:nth-child(2) {
					color: #FF6B77;
				}
			}
		}

		.other {
			padding: 80rpx 0 60rpx 0;
			color: #C5C5C5;
			text-align: center;
			font-size: 24rpx;

			.othen_login {
				display: flex;
				justify-content: center;
				align-items: center;

				text {
					padding: 0 40rpx;
				}
			}

			.type {
				padding-top: 92rpx;
				display: flex;
				justify-content: space-between;
				font-size: 28rpx;
				width: 70%;
				margin: 0 auto;

				// width: 60%;
				view {
					display: flex;
					flex-direction: column;
					align-items: center;
				}

				image {
					width: 96rpx;
					height: 96rpx;
					padding-bottom: 16rpx;
				}
			}

			.line {
				width: 120rpx;
				height: 0rpx;
				background: #969DA3;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				border: 2rpx solid #666666;
				position: relative;
				top: 1px;
			}
		}
	}

	/deep/.u-form-item__body {
		border-bottom: 1px solid #C5C5C5 !important;
		padding: 16px 0 !important;
	}

	.u-button {
		height: 88rpx !important;
	}
</style>